<template>
  <div style="padding: 40px">

        <div style="margin: 10px 0;">
          <el-button type="primary" style="margin-left: 10px;" @click="add"  v-if="userRole === 'admin'" >创建学科</el-button>

        </div>

    <el-table :data="tableData" border stripe style="width: 100%;" header-align="center" align="center"  v-if="userRole === 'admin'" >
      <el-table-column label="学科ID" width="70px"  header-align="center" align="center"  v-if="userRole === 'admin' ">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="subjectName" label="学科名称" header-align="center" align="center"  v-if="userRole === 'admin' "/>
      <el-table-column fixed="right" label="操作" width="260px" header-align="center" align="center" v-if="userRole === 'admin' " >
        <template #default="scope">
         <!--  编辑按钮-->
          <el-button type="primary" v-if="userRole === 'admin' "  @click="handleEdit(scope.row)">更新学科</el-button>
          <!-- 删除按钮 -->
          <el-popconfirm title="这段内容确定删除吗?" v-if="userRole === 'admin'" @onConfirm="handleDelete(scope.row.subjectId)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建学科 -->
    <el-dialog :visible.sync="dialogVisible" title="创建学科" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="学科名称">
          <el-input v-model="form.subjectName" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!--  更新学科 -->
    <el-dialog :visible.sync="dialogVisible1" title="更新学科" width="30%">
      <el-form :model="form1" label-width="120px">
        <el-form-item label="学科ID">
          <el-input v-model="form1.subjectId" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input v-model="form1.subjectName" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
    </el-dialog>
    <!--  分页器-->


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {

  getGuanXinClass, getGuanUpDataClass, getThreeAll,
} from '@/http/userList.js'
import {getZiYuanReturn} from "@/http/user";

export default {
  name: "Notice",

  data() {
    return {
      form: {
        "subjectName": ""
      },
      form1: {
        "subjectId": "",
        "subjectName": ""
      },
      searchKeyword: '', // 添加搜索关键字
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 10,
      total:0,
      tableData: [],


    }

  },
  created() {
    this.load()

  },

  methods: {

    async load() {
      const { code, message, data }  = await  getThreeAll({
        current: this.currentPage, size: this.pageSize
      });
      console.log(data)
      this.tableData = data
      this.total= Number(data.total)

    },
    add() {
      console.log("123");
      this.dialogVisible = true
      this.form = {
        "subjectName": ""
      }
    },
    // 确认添加
    async save() {
      const {code, message} = await getGuanXinClass(this.form)
      console.log(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "添加成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "添加失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    // 编辑
    handleEdit(row) {
      console.log(row);
      this.form1 = {...row}
      this.dialogVisible1 = true
    },
    // 确认修改
    async saveEdit() {

      const {code, message} = await getGuanUpDataClass(this.form1)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },

    async handleDelete(subjectId) {

      const {code, message} = await getZiYuanReturn({id:subjectId})
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getThreeAll({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },


    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    }),

  }

}
</script>

<style></style>
